<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn">
      <el-popover v-model:visible="visible" placement="right-start" trigger="click" width="">
        <div class="add-node-popover-body">
          <a class="add-node-popover-item approver" @click="addType(1)">
            <div class="item-wrapper">
              <i-ep-stamp class="iconfont" />
            </div>
            <p>审批人</p>
          </a>
          <a class="add-node-popover-item notifier" @click="addType(2)">
            <div class="item-wrapper">
              <i-ep-promotion class="iconfont" />
            </div>
            <p>抄送人</p>
          </a>
          <a class="add-node-popover-item condition" @click="addType(4)">
            <div class="item-wrapper">
              <i-ep-share class="iconfont" />
            </div>
            <p>条件分支</p>
          </a>
        </div>
        <template #reference>
          <el-button class="btn">
            <i-ep-plus class="iconfont" />
          </el-button>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'AddNode',
  props: {
    childNodeP: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:childNodeP'],
  setup(props, { emit }) {
    const visible = ref(false)

    const addType = (type) => {
      visible.value = false

      if (type === 1) {
        emit('update:childNodeP', {
          nodeName: '审核人', // 节点名称
          error: true, // 当前审批是否通过校验
          type: 1, // 0 发起人 1审批 2抄送 3条件 4路由
          settype: 4, // 审批人设置 1指定成员 2主管 4发起人自选 5发起人自己 7连续多级主管
          selectMode: 1, // 审批人数 1自选一个人 2自选多个人
          selectRange: 1, // 选择范围 1所有人 2指定成员 3指定角色
          directorLevel: 1, // 审批终点 1为直接主管
          examineMode: 1, // 多人审批时采用的审批方式 1依次审批 2会签
          noHanderAction: 1, // 审批人为空时 1自动通过 2自动驳回
          superiorApproval: true, // 找不到主管时，由上级主管代审批
          examineEndDirectorLevel: 1, // 审批终点 第n层主管
          childNode: props.childNodeP,
          nodeUserList: [] // 指定成员 操作人
        })
      }
      if (type === 2) {
        emit('update:childNodeP', {
          nodeName: '抄送人', // 节点名称
          type: 2, // 0 发起人 1审批 2抄送 3条件 4路由
          ccSelfSelectFlag: 1, // 允许发起人自选抄送人
          childNode: props.childNodeP,
          nodeUserList: [] // 指定成员 操作人
        })
      }
      if (type === 4) {
        emit('update:childNodeP', {
          nodeName: '路由',
          type: 4,
          childNode: null,
          conditionNodes: [{ // 条件节点
            nodeName: '条件1',
            error: true,
            type: 3,
            priorityLevel: 1, // 条件优先级
            conditionList: [], // 当前条件
            nodeUserList: [], // 发起人
            childNode: props.childNodeP
          }, {
            nodeName: '条件2',
            type: 3,
            priorityLevel: 2,
            conditionList: [],
            nodeUserList: [],
            childNode: null
          }]
        })
      }
    }

    return {
      visible,
      addType
    }
  }
}
</script>

<style lang="scss" scoped>

.add-node-btn-box {
    width: 240px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    position: relative;
    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        margin: auto;
        width: 2px;
        height: 100%;
        background-color: var(--ep-color-info-light-5);
    }
    .add-node-btn {
        user-select: none;
        width: 240px;
        padding: 20px 0 32px;
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        flex-grow: 1;
        .btn {
            outline: none;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
            width: 30px;
            height: 30px;
            background: #3296fa;
            border-radius: 50%;
            position: relative;
            border: none;
            line-height: 30px;
            transition: all .3s cubic-bezier(.645, .045, .355, 1);
            .iconfont {
                color: #fff;
                font-size: 16px
            }
            &:hover {
                transform: scale(1.3);
                box-shadow: 0 13px 27px 0 rgba(0, 0, 0, .1)
            }
            &:active {
                transform: none;
                background: #1e83e9;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1)
            }
        }
    }
}
.add-node-popover-body {
    display: flex;
    .add-node-popover-item {
        margin-right: 10px;
        cursor: pointer;
        text-align: center;
        flex: 1;
        color: #191f25!important;
        .item-wrapper {
            user-select: none;
            // display: inline-block;
            width: 80px;
            height: 80px;
            margin-bottom: 5px;
            background: #fff;
            border: 1px solid #e2e2e2;
            border-radius: 50%;
            transition: all .3s cubic-bezier(.645, .045, .355, 1);
            display: flex;
            justify-content: center;
            align-items: center;

            .iconfont {
                font-size: 35px;
                line-height: 80px
            }
        }
        &.approver{
            .item-wrapper {
                color: #ff943e
            }
        }
        &.notifier{
            .item-wrapper {
                color: #3296fa
            }
        }
        &.condition{
            .item-wrapper {
                color: #15bc83
            }
        }
        &:hover{
            .item-wrapper {
                background: #3296fa;
                box-shadow: 0 10px 20px 0 rgba(50, 150, 250, .4)
            }
            .iconfont {
                color: #fff
            }
        }
        &:active{
            .item-wrapper {
                box-shadow: none;
                background: #eaeaea
            }
            .iconfont {
                color: inherit
            }
        }
    }
}
</style>
